<template>
	<view :style="{width: props.width}" class="change-btn" @tap="showPopup">
		{{ text }}
	</view>
	<u-popup v-model="show" mode="bottom" safe-area-inset-bottom close-icon :mask-close-able="false" border-radius="8">
		<view class="content">
			<view class="title">人物选择</view>
			<scroll-view class="person-picker" scroll-x="true" enable-flex>
				<view v-if="persons[0].src && show" class="picker-item-container">
					<view v-for="(person, index) in persons"
						:class="`${person.src === currentPerson ? 'acitve' : ''}`" :key="index"
						@click="selectPerson(person.src)">
						<image :lazy-load="true" :src="person.src" style="height: 110rpx;" mode="heightFix"
							class="picker-item" />
						<view class="name">{{ person.title }}</view>
					</view>
				</view>
				<view v-if="!persons[0].src && show" class="picker-item-container">
					<view
						v-for="(person, index) in persons"
						:class="`${person === currentPerson ? 'acitve' : ''}`" :key="index"
						@click="selectPerson(person)">
						<image :lazy-load="true" :src="person" style="height: 110rpx;" mode="heightFix"
							class="picker-item" />
					</view>
				</view>
			</scroll-view>
			<view class="btns">
				<view class="confirm" @click="confirm">选中</view>
				<view class="confirm" @click="close">取消</view>
			</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
	import { ref, defineEmits, defineProps, watch } from "vue";
	import { DEFAULT_PERSONS } from './config';
	const vk = uni.vk;

	const emit = defineEmits(["update:modelValue", "update:visible"]);
	const props = defineProps({
		modelValue: {
			type: String,
			default: ref('')
		},
		persons: {
			type: Array,
			default: () => DEFAULT_PERSONS
		},
		width: {
			type: String,
			default: '320rpx'
		},
		text: {
			type: String,
			default: '换个人物'
		}
	})

	const show = ref(false);

	const showPopup = () => {
		show.value = true;
	}

	const currentPerson = ref(props.modelValue);

	const close = () => {
		show.value = false;
	}

	const confirm = () => {
		emit('update:modelValue', currentPerson.value);
		close();
	}

	let selectPerson = (person : string) => {
		currentPerson.value = person;
	}
</script>

<style scoped lang="scss">
	.change-btn {
		width: 320rpx;
		font-size: 24rpx;
		padding: 18rpx 0;
		text-align: center;
		color: #ffffff;
		background: #70b9fd;
		opacity: 0.8;
		border-radius: 6px;
		box-shadow: 1px 1px 4px 1px #dddddd;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	}

	.title {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
	}

	.btns {
		display: flex;
		margin-top: 10rpx;
		border-top: 1px solid #f1f1f1;
	
		:first-child {
			border-right: 1px solid #f1f1f1;
		}
	}

	.confirm {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.person-picker {
		display: flex;
		flex-direction: row;
		height: 250rpx;
		align-items: center;
		white-space: nowrap;

		.picker-item-container {
			display: flex;
			flex-direction: row;
			align-items: center;
			white-space: nowrap;
			height: 100%;
			
			.picker-item {
				margin: 0 5rpx;
				height: 110rpx;
				width: 110rpx;
				position: relative;
				border: 1px solid #f1f1f1;
				z-index: 1;
				display: inline-block;	
			}
		}

		.name {
			margin-top: 10rpx;
			font-size: 20rpx;
			color: #333;
			text-align: center;
		}

		.acitve {
			box-shadow: 0px 0px 2px 2px #ffca6b;
			z-index: 2;
		}
	}
</style>